<template>
  <div>
    <div class="tu">
      <el-row>
        <el-col :span="12" :offset="6" class="zhuce-block">
          <h3>实名注册</h3>
          <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="zhuce-form" size="mini">
            <el-form-item label="所属地区" required>
              <el-col :span="11">
                <el-form-item label="" required prop="region1">
                  <el-select v-model="form.region1" placeholder="请选择">
                    <el-option label="台州市" value="taizhou"></el-option>
                    <el-option label="杭州市" value="hangzhou"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-form-item label="" required prop="region2">
                  <el-select v-model="form.region2" placeholder="请选择">
                    <el-option label="椒江区" value="jiaojiang"></el-option>
                    <el-option label="台州湾新区" value="xinqu"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>


            <el-form-item label="身份证号码" required prop="idCard">
              <el-input v-model="form.idCard" placeholder="请输入身份证号码" maxlength="18"></el-input>
            </el-form-item>

            <el-form-item label="姓名" required prop="name">
              <el-input v-model="form.name" placeholder="请填写联系人姓名,20字以内" axlength="20"></el-input>
            </el-form-item>

            <el-form-item label="手机号码" required prop="phone">
              <el-input v-model="form.phone" placeholder="请输入11位手机号" minlength="11" maxlength="11" type="tel"
                axlength="11"></el-input>
            </el-form-item>

            <el-form-item label="邮箱号" required prop="email">
              <el-input v-model="form.email" placeholder="请填写邮箱"></el-input>
            </el-form-item>

            <el-form-item label="性别" required prop="gender">
              <el-select v-model="form.gender" placeholder="请选择">
                <el-option label="男" value="male"></el-option>
                <el-option label="女" value="female"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="民族" required prop="group">
              <el-select v-model="form.group" placeholder="请选择">
                <el-option label="汉族" value="han"></el-option>
                <el-option label="回族" value="hui"></el-option>
                <el-option label="维吾尔族" value="weiwuer"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="政治面貌" required prop="face">
              <el-select v-model="form.face" placeholder="请选择">
                <el-option label="群众" value="qunzhong"></el-option>
                <el-option label="团员" value="tuanyuan"></el-option>
                <el-option label="党员" value="dangyuan"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="出生日期" required prop="date">
              <el-date-picker type="date" placeholder="请选择日期" v-model="form.date" style="width: 100%"></el-date-picker>
            </el-form-item>

            <el-form-item label="设置密码" required prop="password1">
              <el-input v-model="form.password1" placeholder="密码长度至少大于等于6位" show-password minlength="6"></el-input>
            </el-form-item>

            <el-form-item label="确认密码" required prop="password2">
              <el-input v-model="form.password2" placeholder="请再次输入密码" show-password minlength="6"></el-input>
            </el-form-item>

            <el-form-item label="" prop="agree">
              <el-checkbox-group v-model="form.agree">
                <el-checkbox label="">
                  <span>我已阅读并同意此协议</span>
                  <a href="http://baidu.com" target="_blank">《用户注册协议》</a>
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">注册</el-button>
            </el-form-item>

          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        region1: "",
        region2: "",
        idCard: "",
        name: "",
        phone: "",
        email: "",
        gender: "",
        group: "",
        date: "",
        password1: "",
        password2: "",
        agree: "",
      },
      rules: {
        region1: [{ required: true, message: "请选择城市", trigger: 'blur' }],
        region2: [{ required: true, message: "请选择城市", trigger: 'change' }],
        idCard: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
          { min: 18, max: 18, message: '请输入18位的身份证号码', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择', trigger: 'blur' },
          { max: 20, message: '请不要大于20字', trigger: 'blur' }
        ],

        group: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],

        face: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],

        date: [
          { required: true, message: '请选择日期', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请填写联系人姓名,20字以内', trigger: 'blur' },
          { max: 20, message: '请填写联系人姓名,20字以内', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入11位手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请填写邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
        ],

        password1: [
          { required: true, message: '密码长度至少大于等于6位', trigger: 'blur' },
          { min: 6, message: '密码长度至少大于等于6位', trigger: 'blur' },

          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入密码'));
              } else {
                if (this.form.password2 !== '') {
                  this.$refs.form.validateField('password2');
                }
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        password2: [
          { required: true, message: '再次输入密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'));
              } else if (value !== this.form.password1) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }
        ],
        agree: [
          { required: true, message: '请先同意', trigger: 'blur' }
        ],
      },

    };
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form);
          this.submitSrv();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },


    submitSrv() {
      // 设置请求的URL和参数
      const url = 'https://your-api-endpoint.com/data';
      const data = this.form;

      // 发起POST请求
      fetch(url, {
        method: 'POST', // 指定请求方法
        headers: {
          'Content-Type': 'application/json' // 设置请求的Content-Type
        },
        body: JSON.stringify(data) // 将数据转换为JSON字符串
      })
        .then(response => {
          if (response.ok) {
            return response.json(); // 解析JSON响应
          }
          throw new Error('Network response was not ok.');
        })
        .then(data => console.log(data)) // 处理解析的JSON数据
        .catch(error => console.error(
          'There has been a problem with your fetch operation:',
          error
        )
        ); // 捕获错误
    },
  },
};



</script>
<style scoped>
.tu {
  background-image: url(../assets/loginbg.png);
  background-repeat: no-repeat;
  background-size: 200% auto;
}

.zhuce-block {
  background: #c7c1c190;
  border-radius: 1px;
  padding: 1px;
}

h3 {
  background: #d80f0f;
  color: aqua;
  padding: 20px;
  border-radius: 20px 20px 0 0;
  margin-bottom: 0;
}
</style>
 